<!--
与普通 input 使用方法一致
如事件没有监听，再添加
-->

<template lang="html">
  <div class="my-input">
    <input
      type="text"
      v-model="value"
      :placeholder="placeholder"
      @focus="$emit('focus')"
      @blur="$emit('blur')"
      @input="$emit('input')">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      require: true,
      default: ''
    },
    placeholder: {
      type: String,
      require: false,
      default: ''
    }
  },
  watch: {
    value (val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="less">
  .my-input{
    padding-left: 9px; /* 18/40 */
    border: 1px solid #dadada;
    border-radius: 5px; /* 5/40 */
    input{
      outline: none;
      border: none;
      padding: 0;
      margin: 0;
      line-height: 1;
      width: 100%;
    }
    ::-webkit-input-placeholder { /* WebKit browsers */
      color:    #999;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:    #999;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:    #999;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
      color:    #999;
    }
  }
</style>
